<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <link rel="stylesheet" href="../../reset.css">

    <link rel="stylesheet" href="./index.css">

    <link rel="stylesheet" href="../../assets/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <script src="../../bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">温馨提示</strong>
                <small>刚刚</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">

            </div>
        </div>
    </div>
    <script>
        const toastLiveExample = document.getElementById('liveToast')
        const toastBody = toastLiveExample.querySelector('.toast-body')
        const showToast = (innerHTML) => {
            toastBody.innerHTML = innerHTML
            const toast = new bootstrap.Toast(toastLiveExample)
            toast.show()
        }
    </script>

    <div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="offcanvasRight"
        aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasRightLabel">编辑表格</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">日期</label>
                <input type="date" class="form-control" id="exampleFormControlInput1"
                    onchange="handleChange('editform_date', event)" placeholder="请选择日期">
            </div>
            <div class="mb-3">
                <label for="exampleFormControlInput2" class="form-label">项目</label>
                <input type="text" oninput="handleInput('editform_name', event)" class="form-control"
                    id="exampleFormControlInput2" placeholder="请输入项目"></input>
            </div>
            <div class="mb-3">
                <label for="exampleFormControlInput3" class="form-label">获得者</label>
                <input type="text" oninput="handleInput('editform_user', event)" class="form-control"
                    id="exampleFormControlInput3" placeholder="请输入获得者"></input>
            </div>
            <button type="button" class="btn btn-primary px-3" onclick="handleSubmit()" data-bs-dismiss="offcanvas"
                aria-label="Close">确认</button>
        </div>
    </div>

    <div class="box position-fixed top-0 start-0 bottom-0 end-0">
        <div class="left position-absolute top-0 bottom-0 start-0">

            <div class="logo">
                <img src="../../assets/index/logo.png" width="140" class="img-fluid d-block mx-auto" alt="...">
            </div>
            <div class="ul ">
                <div class="content" onclick="hanelGo('../event/index.html')">
                    <i class="bi bi-bar-chart-steps"></i>
                    <span>比赛项目</span>
                </div>
            </div>
            <div class="ul actived">
                <div class="content">
                    <i class="bi bi-trophy-fill"></i>
                    <span>奖牌榜</span>
                </div>
                <div class="hover-box">
                    <div class="li actived" id="li" onclick="handleChangeUser(0)">
                        <span>个人奖牌榜</span>
                    </div>
                    <div class="li" onclick="handleChangeUser(1)" id="li">
                        <span>奥运会奖牌榜</span>
                    </div>
                </div>
            </div>

            <div class="ul ">
                <div class="content" onclick="hanelGo('../rank/index.html')">
                    <i class="bi bi-gpu-card"></i>
                    <span>奥运会榜单</span>
                </div>
            </div>
            <div class="ul ">
                <div class="content" onclick="hanelGo('../like/index.html')">
                    <i class="bi bi-gpu-card"></i>
                    <span>我的关注</span>
                </div>
            </div>
            <div class="ul">
                <div class="content" onclick="hanelGo('../../index.html')">
                    <i class="bi bi-box-arrow-in-right"></i>
                    <span>退出登录</span>
                </div>
            </div>
            <script>
                const hanelGo = (herf) => {
                    console.log(herf);
                    location.href = herf
                }
            </script>
        </div>
        <div class="right position-absolute top-0 bottom-0 end-0 ">
            <div class="head">
                <h2 class="w-auto fw-bold">
                    2023年东京奥运会
                </h2>

                <div class="d-flex">
                    <div class="dropdown">
                        <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            项目
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">游泳</a></li>
                            <li><a class="dropdown-item" href="#">乒乓球</a></li>
                            <li><a class="dropdown-item" href="#">跳水</a></li>
                            <li><a class="dropdown-item disabled" href="#">...</a></li>
                        </ul>
                    </div>
                    <div class="dropdown mx-3">
                        <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            国家
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">中国</a></li>
                            <li><a class="dropdown-item" href="#">美国</a></li>
                            <li><a class="dropdown-item disabled" href="#">...</a></li>
                        </ul>
                    </div>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="关键字" aria-label="关键字"
                            aria-describedby="addon-wrapping">
                        <button class="btn btn-dark" type="button">搜索</button>
                    </div>
                </div>

                <script>
                    const dropdownToggles = document.querySelectorAll('.dropdown-toggle')
                    const dropdownMenus = document.querySelectorAll('.dropdown-menu')
                    for (let i = 0; i < dropdownToggles.length; i++) {
                        const dropdownToggle = dropdownToggles[i];
                        const dropdownMenu = dropdownMenus[i];
                        dropdownToggle.onfocus = () => {
                            dropdownMenu.style.display = 'block'
                            dropdownToggle.onblur = () => {
                                dropdownMenu.style.display = 'none'
                                dropdownToggle.onblur = null
                            }
                        }
                    }
                </script>
            </div>
            <div class="body row w-100 px-1 py-4 d-block" style="height: calc(100% - 80px);">

                <div class=" rounded-5 p-4 d-flex flex-column h-100 align-content-start"
                    style="background-color: #f0b245;">

                    <div class="w-100" style="height: max-content; padding-bottom: 20px;">
                        <div class="float-start fs-5 text-light">
                            个人奖牌榜
                        </div>

                        <div class="input-group float-end " style="width: max-content;">
                            <input type="text" class="form-control" oninput="handleInput('keyword', event)"
                                placeholder="请输入项目" aria-label="请输入项目" aria-describedby="button-addon2">
                            <button class="btn btn-primary" type="button" id="button-addon2"
                                onclick="handleSearch()">查询</button>
                            <button class="btn btn-primary" type="button" id="button-addon2"
                                onclick="handleReset()">重置</button>
                        </div>
                        <button class="btn btn-danger float-end px-3 me-3" type="button" id="button-addon2"
                            onclick="handleDeleteAll()">批量删除</button>
                    </div>

                    <div class="d-flex" style="height: calc(100% - 58px);">
                        <div class="mx-3 position-relative" style="width: 120px;">
                            <div class="px-3 ">
                                <div onclick="handleToggle(event,1)"
                                    class="text-light my-2 py-1 fw-bold bg-transparent fs-5 tab-item text-center rounded-pill actived">
                                    金牌</div>
                                <div onclick="handleToggle(event,2)"
                                    class="text-light my-2 py-1 fw-bold bg-transparent fs-5 tab-item text-center rounded-pill">
                                    银牌</div>
                                <div onclick="handleToggle(event,3)"
                                    class="text-light my-2 py-1 fw-bold bg-transparent fs-5 tab-item text-center rounded-pill">
                                    铜牌</div>
                            </div>
                        </div>

                        <div class="scroll-box" style="flex: 1;">
                            <table class="table text-light table-borderless table-responsive">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <input class="form-check-input" type="checkbox" value="" id="toggleAll"
                                                onclick="toggleAll(event)">
                                        </th>
                                        <th scope="col">顺序</th>
                                        <th scope="col">日期</th>
                                        <th scope="col">项目</th>
                                        <th scope="col">获得者</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="renderTbody">
                                    <!-- <tr class="opacity-75">
                                    <td>
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                    </td>
                                    <th scope="row">1</th>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                    <td>@mdo</td>
                                    <td class="opions">
                                        <span class="d-inline-block text-light px-2 rounded bg-info">编辑</span>
                                        <span class="d-inline-block text-light px-2 rounded bg-danger">删除</span>
                                    </td>
                                </tr> -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <script src="./data.js"></script>
    <script src="./index.js"></script>




</body>

</html>